<!--
 * @Descripttion: app设置
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2023-01-31 16:35:57
-->
<template>
  <div class="lb-system-wechat">
    <top-nav></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="150px"
        class="config-form"
      >
        <el-form-item label="技师提成计算方式" prop="is_current">
          <el-radio-group v-model="subForm.is_current">
            <div class="pt-md pb-md">
              <el-radio :label="1"
                >周期结束后，等级和维度数据清零
                <lb-tool-tips :padding="0"
                  >技师在设置的周期时间内可逐步升级，升级后的每一笔订单按照等级后的等级提成计算
                  <div class="mt-sm">
                    周期结束后，技师在上一周期内累积的所有业绩、时长、积分和业绩以及达到的等级全部清零
                  </div></lb-tool-tips
                ></el-radio
              >
            </div>
            <el-radio :label="2"
              >周期结束后，只清零维度数据，等级按照上期核算最高等级计算
              <lb-tool-tips :padding="0"
                >技师在本周期（T周期）累积了业绩、时长、业绩、积分
                <div class="mt-sm mb-sm">
                  在周期结束时将4个维度数据清零，同时核算技师的4个维度数据满足哪个等级，以最高等级记录
                </div>
                再下一周期（T+1）按照该等级提成比例计算每一笔订单</lb-tool-tips
              >
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="推荐技师样式" prop="recommend_style">
          <el-radio-group v-model="subForm.recommend_style">
            <el-radio :label="1">样式一</el-radio>
            <el-radio :label="2">样式二</el-radio>
          </el-radio-group>

          <el-button
            @click="showDialog = 'type'"
            type="small"
            class="show-btn"
            style="margin-left: 20px"
            >查看示例</el-button
          >
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitForm">{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog
      title="查看示例"
      :visible.sync="showDialog"
      :append-to-body="true"
      width="700px"
      center
      top="5vh"
    >
      <div class="flex-between">
        <div v-for="(item, index) in recommendList" :key="index">
          <div class="flex-center pd-lg f-paragraph c-title">
            {{ item.title }}
          </div>
          <img class="look-image" :src="item.img" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      recommendList: [{ title: '样式一', img: 'https://lbqny.migugu.com/admin/anmo/technician/recommend_1.jpeg' }, { title: '样式二', img: 'https://lbqny.migugu.com/admin/anmo/technician/recommend_2.jpeg' }],
      showDialog: false,
      subForm: {
        is_current: 1,
        recommend_style: 1
      }
    }
  },
  created () {
    this.getFormInfo()
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    async getFormInfo () {
      let [config, dynamic] = await Promise.all([this.$api.system.configInfo(), this.$api.system.configInfoSchedule()])
      this.subForm.is_current = config.data.is_current
      this.subForm.recommend_style = dynamic.data.recommend_style
    },
    async submitForm () {
      let flag = false
      this.$refs['subForm'].validate(valid => {
        if (valid) {
          flag = true
        }
      })
      let { is_current: cur, recommend_style: recommend } = this.subForm
      if (flag) {
        await Promise.all([this.$api.system.configUpdate({ is_current: cur }), this.$api.system.configUpdateSchedule({ recommend_style: recommend })])
        this.$message.success(this.$t('tips.successSub'))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-system-wechat {
  width: 100%;
  .config-form {
    .el-input {
      width: 300px;
    }
  }
}
.look-image {
  width: 297px;
  height: 660px;
  border-radius: 10px;
  border: 1px solid #eee;
}
</style>
